<template>
  <div class="app-header">
      <div class="header">
      <div class="header-right">
        <a-avatar size="small"  :src="$store?.state?.userpic?$store?.state?.userpic:''" v-show="$store?.state?.userpic"/>
        <a-avatar size="small"  icon="user" v-show="!$store?.state?.userpic"/>
        <a-dropdown>
          <p class="header-right-name ant-dropdown-trigger" @click="e => e.preventDefault()">{{$store?.state?.user?$store?.state?.user?.fullname:'未登录'}}</p>
          <a-menu slot="overlay">
            <a-menu-item>
              <a href="javascript:;" @click="login_in" v-show="!$store.state.user.user">登录</a>
            </a-menu-item>
            <a-menu-item>
              <a href="javascript:;" @click="show_infos"  v-show="$store.state.user.user">个人信息</a>
            </a-menu-item>
            <a-menu-item>
              <a href="javascript:;" @click="login_out"  v-show="$store.state.user.user">登出</a>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </div>
      <div class="header-left">
        <img class="header-left-ico" src="">
        <span class="header-left-title">人工判译V{{ window?.server_version}}</span>
        <div class="menu" style="width: 80%;">
          <div class="menu-div" style="height: 100%;">
            <!--  -->
            <a-menu  v-model:selectedKeys="current" mode="horizontal" style="background: none; color: #fff; border: none; line-height: 42px;">
              
              <!-- <a-menu-item key="task" @click="GoToRoute('task')" v-show="$common_apis.GetUserRole('2c9380847b9ac53e017b9f365a1c44c2')" > 
                <a-icon type="issues-close" />
                  <span class="menu-name">人工判译/勾绘</span>
              </a-menu-item>
              <a-menu-item key="checkai" @click="GoToRoute('checkai')" v-show="$common_apis.GetUserRole('2c9380847b9ac53e017b9f365a1c44c2')" > 
                <a-icon type="issues-close" />
                  <span class="menu-name">精度检查</span>
              </a-menu-item>
              <a-menu-item key="taskfu" @click="GoToRoute('taskfu')" v-show="$common_apis.GetUserRole('2c9380847b9ac53e017b9f365a1c44c2')" > 
                <a-icon type="issues-close" />
                  <span class="menu-name">人工属性赋值</span>
              </a-menu-item> 
              <a-menu-item key="taskqc" @click="GoToRoute('taskqc')" v-show="$common_apis.GetUserRole('2c9380847b9ac53e017b9f365a1c44c2')" > 
                <a-icon type="issues-close" />
                  <span class="menu-name">判读成果质检</span>
              </a-menu-item> 
               <a-menu-item key="drawtask" @click="GoToRoute('drawtask')" v-show="$common_apis.GetUserRole('2c9380847b9ac53e017b9f365a1c44c2')" > 
                <a-icon type="edit" />
                  <span class="menu-name">人工勾绘</span>
              </a-menu-item>
              <a-menu-item key="manager"  @click="GoToRoute('manager')" v-show="$common_apis.GetUserRole('2c9380847cbbf661017d6a79c15056f0')"> 
                <a-icon type="stock" />
                <span class="menu-name">任务管理</span>
              </a-menu-item> -->
              <!-- v-show="$common_apis.GetUserRole('2c9380847cbbf661017d6a79c15056f0')" -->
              <a-menu-item key="aitask" @click="GoToRoute('aitask')" > 
                <mail-outlined />
                <span class="menu-name">AI任务管理</span>
              </a-menu-item>
              <a-menu-item key="mytask" @click="GoToRoute('mytask')" > 
                <user-outlined />
                <span class="menu-name">个人管理</span>
              </a-menu-item>
              <!-- <a-menu-item key="services" @click="GoToRoute('services')"  > 
                <mail-outlined />
                <span class="menu-name">服务管理</span>
              </a-menu-item>
              <a-menu-item key="yx" @click="GoToRoute('yx')"  > 
                <mail-outlined />
                <span class="menu-name">影像查看器</span>
              </a-menu-item> -->
            </a-menu> 
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        current: ['mytask'],
      }
    },
    methods: {
      async login_out(){
        this.$user.set_token(null)
        await this.$user.write_user()
        this.$router.push("/");
      },
      login_in(){
        this.$router.push("/");
      },
      show_infos(){
        this.GoToRoute('mytask')
      },
      GoToRoute(_route) {
        if(this.$route.name!=_route){
          this.$router.push({
            name: _route,
          })
        }
      },
      Optype_Switch(){
        this.$mitt.emit('bus_change_optype')
      }
    }
  }
</script>
<style>
.header {
  position: relative;
  height: 100%;
  overflow: hidden;
  color: #fff;
  background:#7b87a1;
}
.header-right {
    float: right;
    color: rgba(0,0,0,.65);
    font-size: 14px;
    line-height: 50px;
    padding-right: 28px;
    cursor: pointer;
}
.header-left {
    padding-left: 24px;
    height: 50px;
    line-height: 50px;
    overflow-y: hidden;
}

.header-right .header-right-ico {
    display: inline-block;
    vertical-align: middle;
    width: 21px;
    line-height: 21px;
    color: #fff;
    font-size: 24px;
}
.header-right .header-right-name {
    color: #fff;
    display: inline-block;
    padding: 0 12px 0 8px;
}
.tx-fonts {
    font-family: tx-fonts!important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.tx-userName:before {
    content: "\E6E1"
}
.header-left .header-left-ico {
    width: 24px;
    height: 24px;
    margin-right: 12px;
    display: none;
}
.header-left img {
    vertical-align: middle;
    border-style: none;
}

.header-left .header-left-title {
    font-size: 20px;
    padding-right: 12px;
    cursor: pointer;
    color: #ecefff;
}
.header-left .menu {
    display: inline-block;
    min-width: 450px;
}

.header-left .menu-name {
    font-size: 14px;
    vertical-align: top;
}
/* .menu-div .ant-menu-item.ant-menu-item-selected,
.menu-div .ant-menu-item.ant-menu-item-selected .menu-name {
  color: #fff;
  background-color: #22242d
} */
/* .ant-menu-horizontal>.ant-menu-item-active, 
.ant-menu-horizontal>.ant-menu-item-open, 
.ant-menu-horizontal>.ant-menu-item-selected, 
.ant-menu-horizontal>.ant-menu-item:hover, 
.ant-menu-horizontal>.ant-menu-submenu-active,
 .ant-menu-horizontal>.ant-menu-submenu-open, 
 .ant-menu-horizontal>.ant-menu-submenu-selected,
.ant-menu-horizontal>.ant-menu-submenu:hover {
    color: #1890ff;
    border-bottom: 2px solid #1890ff;
} */
</style>